<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta charset="UTF-8">
<title>Welcome to Hungry Takeout!</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
	src="${APP_PATH}/static/js/jquery_min_341.js"></script>
<link
	href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<style type="text/css">
body {
	background: url(${APP_PATH}/static/img/index01.jpg) no-repeat center
		center fixed;
	opacity: 0.9;
	background-size: 100%;
}

.jumbotron {
	background: url(${APP_PATH}/static/img/index02.jpg) no-repeat;
	background-size: 100%;
	opacity: 0.8;
}

#cover {
	display: none;
	position: fixed;
	background: #000000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.40;
	z-index: 1
}
</style>

<script>
	$(document).ready(function() {
		//第二层模态框弹出时，为其设置一个大于第一层模态框的z-index
		//使得第二层模态框可以在第一层模态框上面
		$(document).on('show.bs.modal', '#myModal2', function(event) {
			var zIndex = 1040 + (10 * $('.modal:visible').length + 1);
			$(this).css('z-index', zIndex);
			//开启遮罩，遮罩的高度小于第二层模态框
			$("#cover").css('z-index', zIndex - 1)
			$('#cover').css('display', 'block'); //显示遮罩层 
		});

		$('#myModal2').on('hide.bs.modal', function() {
			//第二层模态框关闭时，关闭遮罩
			$('#cover').css('display', 'none');
		});
	});
	function onclick01() {
		$("#jumbotron").hide();//隐藏
	}
	var flag01 = false;
	$('#myModal1').on('shown.bs.modal', function() {
		$('#myInput').focus()
	})

	function login() {
		//登录逻辑
		//jQuery写法
		var user = $('#user1').val();
		var password = $('#password1').val();
		
		//JavaScript原生写法
		//var user = document.getElementById('user').value;
		//var password = document.getElementById('password').value;
		$.ajax({
			type : "post", //post put get 等等
			url : "login",
			//编写登录功能时，要将异步设置为false（缺省为true）
			//如果async是ture,对于FireFox浏览器，会刷新掉alert()弹出框的内容
			//对于Chrome浏览器，第一次注册时会执行error的回调函数，输出“请求在连接过程中出现错误..”
			async : false,
			data : { //要传入文件的数据
				"user" : user,
				"password":password
			},
			success : function(data) {
				if (data == "user") {
					window.open("user.jsp", "_blank");
				} else if (data == "business") {
					window.open("business.jsp", "_blank");
				} else {
					alert("账户名或密码不存在"); //这里data是从ashx文件返回的“账户名或密码不存在..
				}
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) { //连接失败时，执行函数
				//XMLHttpRequest在这个例子里没有用到
				//textStatus是表示状态的字符串，这里textStatus的值是"error"
				//errorThrown包含连接失败的信息，可以输出查看
				alert("请求在连接过程中出现错误..\n" + errorThrown);
			}
		});
	}
	function checkname(){
		var f=false;
		//javascript所有的变量都是以var定义的
		//javascript的变量属于弱类型
		//获取用户输入的用户名
		var name = document.getElementById("loginname").value;
		//去除字符串两端空格
		name=name.trim();
		//判断是否为空
		if(name==""){
			document.getElementById("username_span").innerHTML="用户名不能为空";
		}else if(name.length<3||name.length>16){
			document.getElementById("username_span").innerHTML="用户名的长度为3-16位";
		}
		else{
			document.getElementById("username_span").innerHTML="";
			//校验用户名是否存在
			//使用ajax异步校验用户名
			$.ajax({
				url:"checkName",
				type:"post",
				data:{"username":name},//json数据格式的用户名从jsp传递给controller
				dataType:"json",
				async:false,//让ajax执行代码顺序同步
				success:function(data){
					if(data.msg=="false"){
						document.getElementById("username_span").innerHTML="用户名可用";
						f=true;
					}else{
						document.getElementById("username_span").innerHTML="用户名已存在";
						
					}
				}
			});	
			
		}
		return f;
	} 
	function registerCount(){
		var user = $("#loginname").val();
		var password = $("#password").val();
		var tel = $("#tel").val();
		var enterPassword = $("#enterPassword").val();
		var name = $("#name").val();
		var address = $("#address").val();
		var identity =$("*[name='identity']").val();
		if(	user == null ||
			password == null ||
			tel == null ||
			enterPassword == null ||
			name == null ||
			address == null ||
			identity == null ){
			alert("请完善相关信息,您当前的信息为:"+user+password+tel+enterPassword+name+address+identity);
			return false;
		}
		if(enterPassword == password){
			alert("两次密码不一样"+enterPassword+password);
			return false;
		}
		
		return true;
	}
	
</script>

</head>

<body>

	<div id="container">

		<div class="jumbotron" id="jumbotron">
			<div class="container">
				<br> <br> <br> <br> <br> <br> <br>
				<br> <br> <br> <br>
				<h1>
					<br>
				</h1>
				<p style="text-align: center;">
					<button type="button" class="btn btn-primary btn-lg"
						onclick="onclick01()" value="Login In" data-target="#myModal1"
						data-toggle="modal">Login In</button>
				</p>
			</div>
		</div>

		<div id="myModal1" class="modal fade bs-example-modal-sm"
			tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
			style="height: 100%">
			<div class="modal-dialog modal-sm"
				style="height: 100%; margin: 10px auto;; width: 300px; background-color: rgb(255, 255, 255, 0); padding-top: 13%;"
				role="document">
				<div class="modal-content"
					style="opacity: 0.8; filter: brightness(1)">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="gridSystemModalLabel">请登录</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">

							<div class="form-group form-group-sm">
								<label for="user1" stype="display:inline;">
									&nbsp;&nbsp;&nbsp;&nbsp;账户：</label> <input type="text"
									class="form-control" id="user1"
									style="width: auto; display: inline"
									;  autocomplete="off" />
							</div>


							<div class="form-group form-group-sm">
								<label for="password" style="display: inline;">&nbsp;&nbsp;&nbsp;&nbsp;密码：</label>
								<input type="password" class="form-control" id="password1"
									style="width: auto; display: inline" ;autocomplete="off" />
							</div>


							<div class="modal-footer">

								<div class="col-md-5">
									<button type="submit" class="btn btn-link" onclick="login()">登录</button>
								</div>
								<div class="col-md-5">
									<a data-toggle="modal" href="#myModal2" rel="external nofollow"
										class="btn btn-link">注册</a>

								</div>
								<div class="col-md-1"></div>
							</div>

						</form>
					</div>
				</div>

			</div>
		</div>

		<!-- 第二层模态框 -->
		<div class="modal fade bs-example-modal-sm" id="myModal2">
			<div class="modal-dialog">
				<div class="modal-content" style=" margin:auto auto;width: 500px">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">×</button>
						<h4 class="modal-title">注册</h4>
					</div>
					<div class="container"></div>
						<form action="register" onsubmit="return registerCount()" method="post" style="margin-left:auto;margin-right:auto;  width: 400px" id="register">
					<div class="modal-body" style="margin-left:40px;margin-right:auto;">

							
							<div class="form-group">
								<label for="loginname" stype="display:inline;">账户：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
								<input type="text"  onblur="checkname()"  class="form-control" id="loginname"
									name="loginname" style="display: inline; width: 200px;"
									autocomplete="off" placeholder="登陆账号" /><br/>
									 <span id="username_span"></span>
							</div>
							<div class="form-group">
								<label for="password" style="display: inline;">密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
								<input type="password" class="form-control" id="password"
									name="password" style="display: inline; width: 200px;"
									autocomplete="off" placeholder="登陆密码"  />
							</div>
							<div class="form-group">
								<label for="enterPassword" style="display: inline;">确认密码：</label>
								<input type="password" class="form-control" id="enterPassword"
									style="display: inline; width: 200px;" autocomplete="off"placeholder="确认登陆密码"  />
							</div>
							<div class="form-group">
								<label for="name" style="display: inline;">姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> <input
									type="text" class="form-control" id="name" name="name"
									style="display: inline; width: 200px;" placeholder="个人姓名/店铺姓名" autocomplete="off" />
							</div>

							<div class="form-group">
								<label for="tel" style="display: inline;">联系电话：</label> <input
									type="text"
									onkeyup="value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
									maxlength="11" class="form-control" id="tel" name="tel"
									style="display: inline; width: 200px;" autocomplete="off" placeholder="联系电话" />
							</div>
							<div class="form-group">
								<label for="address" style="display: inline;">联系地址：</label> <input
									type="text" class="form-control" id="address" name="address"
									style="display: inline; width: 200px;" autocomplete="off"  placeholder="联系地址	" />
							</div>


							<div class="form-group">
								<label for="identity" style="display: inline; float: left">注册身份：</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="radio" name="identity" value="user">用户 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input
									type="radio" name="identity" value="business">商家
							</div>
					</div>
					<div class="modal-footer">
						<input type="submit" rel="external nofollow"
							class="btn btn-primary" value="保存"> <input type="button"
							rel="external nofollow" data-dismiss="modal" class="btn"
							value="关闭">
					</div>
					</form>
					
				</div>
			</div>
		</div>
		<!-- 遮罩 -->
		<div id="cover"></div>
	</div>

</body>
</html>
